<template>
	<view class="register">
		<view class="inputWrap bgw pd30">
			<view class="input">
				<view class="inputLeft">
					<view class="title">姓名</view>
					<input class="pickerInput" type="text" v-model="name" placeholder="请输入姓名" placeholder-class="pcs" />
				</view>
			</view>
			<view class="input" @tap="toggleTab()">
				<view class="inputLeft">
					<view class="title">生日</view>
					<view class="pcs" v-if="!birth">请选择生日</view>
					<view class="pickerInput" v-else>{{birth}}</view>
				</view>
			</view>
			<!-- 日期插件 -->
			<w-picker
				mode="date" 
				startYear="1900" 
				:endYear="endYear"
				step="1"
				:defaultVal="defaultVal" 
				:current="false" 
				@confirm="onConfirmtime" 
				ref="date" 
				themeColor="#f00"
			></w-picker>
			
			<view class="input">
				<view class="inputLeft">
					<view class="title">性别</view>
					<picker @change="bindPickerChange" :value="index" :range="array">
						<view class="pcs" v-if="index === -1">请选择性别</view>
						<view class="pickerInput" v-else>{{array[index]}}</view>
					</picker>
				</view>
			</view>
			
			<view class="input" @click="showMulLinkageThreePicker">
				<view class="inputLeft">
					<view class="title">收货地址</view>
					<view>
						<view class="pcs" v-if="!shengId">请选择地址</view>
						<view class="pickerInput" v-else>{{shengName}}-{{shiName}}-{{quName}}</view>
					</view>
				</view>
			</view>
			<mpvue-city-picker :themeColor="themeColor" ref="mpvueCityPicker"
				:pickerValueDefault="cityPickerValueDefault" @onCancel="onCancel" @onConfirm="onConfirm">
			</mpvue-city-picker>
			
			<view class="uniFlex2">
				<view class="title">详细地址</view>
				<textarea @keyup="address=address.replace(/[, ]/g,'')" type="text" v-model="address" placeholder="请输入详细地址" placeholder-class="pcs2"></textarea>
			</view>
			
			<view class="uniFlex2">
				<view class="title">既往病史</view>
				<textarea type="text" v-model="jwbs" placeholder="请输入既往病史" placeholder-class="pcs2"></textarea>
			</view>
			
			<view class="uniFlex2">
				<view class="title">过敏史</view>
				<textarea type="text" v-model="gms" placeholder="请输入过敏史" placeholder-class="pcs2"></textarea>
			</view>
		</view>
		
		<view class="btnStyle" @click="submit">立即提交</view>
	</view>
</template>

<script>
	import mpvueCityPicker from '@/components/mpvue-citypicker/mpvueCityPicker.vue';
	import wPicker from '@/components/w-picker/w-picker.vue';
	import {update_user} from '@/request/api.js'
	export default {
		components: {
			wPicker,
			mpvueCityPicker
		},
		data() {
			return {
				id:'', 
				array: ['男', '女'],
				index: -1,
				name: '',
				birth: '', //生日
				sex:'',
				
				cityPickerValueDefault: [0, 0, 1],
				themeColor: '#007AFF',
				pickerText: '',
				mode: '',
				deepLength: 1,
				
				shengName: '', //居住省
				shengId: '',
				shiName: '', //居住市
				shiId: '',
				quName: '', //居住区
				quId: '',
				
				address: '', //详细地址
				
				jwbs:'',
				gms:'',
				
				// 日期
				endYear:'',//结束日期
				defaultVal: [0, 0, 0, 0, 0, 0],
			}
		},
		onLoad(options) {
			let items = JSON.parse(JSON.parse(options.query).items)
			// console.log(items)
			this.id = items.id
			this.name = items.name
			this.birth = items.age2
			this.sex = items.sex
			
			this.shengName = items.province_name
			this.shengId = items.province
			this.shiName = items.city_name
			this.shiId = items.city
			this.quName = items.area_name
			this.quId = items.area
			this.address = items.address
			
			this.index = Number(items.sex) - 1
			this.jwbs = items.jwbs
			this.gms = items.gms
			
			// 当前日期
			this.getNowFormatDate()
		},
		methods: {
			// 当前日期
			getNowFormatDate() {
				var that = this
				var date = new Date();
				var seperator1 = '-';
				var year = date.getFullYear();
				var month = date.getMonth() + 1;
				var strDate = date.getDate();
				if (month >= 1 && month <= 9) {
					month = '0' + month;
				}
				if (strDate >= 0 && strDate <= 9) {
					strDate = '0' + strDate;
				}
				that.endYear = year
				year = year-1899
				that.defaultVal = [year,month-1,strDate-1]
				// console.log(that.defaultVal)
			},
			// 打开日期
			toggleTab(){
				this.$refs['date'].show();
			},
			// 点击确定选择日期
			onConfirmtime(val){
				this.birth=val.result;
			},
			
			// 选择性别
			bindPickerChange(e) {
				this.index = e.target.value
				this.sex = Number(e.target.value)+1
			},
			// 三级联动选择
			showMulLinkageThreePicker() {
				this.$refs.mpvueCityPicker.show()
			},
			onConfirm(e) {
				this.pickerText = JSON.stringify(e)
				// console.log(JSON.parse(this.pickerText).label)
				this.pickerText = JSON.stringify(e.label).replace(/\"/g, '');
				this.shengName = String(this.pickerText).split('-')[0]
				this.shiName = String(this.pickerText).split('-')[1]
				this.quName = String(this.pickerText).split('-')[2]
				let dataId = JSON.stringify(e.cityCode).replace(/\"/g, '')
				this.shengId = dataId.substring(0, 2) + '0000'
				this.shiId = dataId.substring(0, 4) + '00'
				this.quId = dataId
				// console.log(this.shengId, this.shengName, '省')
				// console.log(this.shiId, this.shiName, '市')
				// console.log(this.quId, this.quName, '区')
			},
			submit(){
				if(!this.name) {
					uni.showToast({
						title: '请输入姓名',
						icon: "none"
					})
					return
				}
				if(!this.birth) {
					uni.showToast({
						title: '请选择生日',
						icon: "none"
					})
					return
				}
				if(!this.sex) {
					uni.showToast({
						title: '请选择性别',
						icon: "none"
					})
					return
				}
				if (!this.shengId || this.shengId==' ') {
					uni.showToast({
						title: '请选择地址',
						icon: "none"
					})
					return
				}
				if (!this.address || this.address==' ') {
					uni.showToast({
						title: '请输入详细地址',
						icon: "none"
					})
					return
				}
				let param = {
					id:this.id,
					company_id:uni.getStorageSync('companyId'),
					openid:uni.getStorageSync('openid'),
					name:this.name,
					age2:this.birth,
					sex:this.sex,
					province: this.shengId,
					city: this.shiId,
					area: this.quId,
					address: this.address,
					jwbs:this.jwbs,
					hunyin:'',
					gms:this.gms
				}
				update_user(param).then(res=>{
					uni.showToast({
						title:'操作成功',
						icon:'none'
					})
					setTimeout(function(){
						uni.navigateBack({
							delta: 1
						})
					},800)
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	page{
		background: #f8f8f8;
	}
	.register {
		.inputWrap {
			margin-bottom: 150upx;
			.input {
				height: 96upx;
				border-bottom: 1px solid #E5E5E5;
				display: flex;
				align-items: center;
				justify-content: space-between;

				.inputLeft {
					display: flex;
					align-items: center;

					.title {
						width: 140upx;
						font-size: 28upx;
						font-family: Source Han Sans CN;
						font-weight: 400;
						line-height: 40px;
						color: #414141;
						margin-right: 40upx;
					}
					.pickerInput {
						font-size: 28upx;
						line-height: 96upx;
						width: 500upx;
					}
				}
			}

			.uniFlex2{
				border-bottom: 1px solid #E5E5E5;
				.title {
					line-height: 40px;
					width: 140upx;
					font-size: 28upx;
					font-family: Source Han Sans CN;
					font-weight: 400;
					color: #414141;
					margin-right: 40upx;
				}
				
				textarea {
					flex: 1;
					padding: 20upx 0;
					height: 130upx;
				}
				
			}
			.uniFlex2:last-of-type {
				border: none;
			}
		}
		.uniBtn{
			font-size: 28upx;
			font-family: Source Han Sans CN;
			font-weight: 400;
			color: #9F9F9F;
			padding: 36upx;
			color: #6996FE;
			margin-bottom: 36upx;
		}
	}
</style>
